<template>
  <CommonCard title="今日订单" :value="numberFormat(orderToday)">
    <!-- 默认插槽 -->
    <div ref="lineChartRef" style="width: 100%; height: 100%"></div>
    <template #footer>
      <span>昨日订单量</span>
      <span class="emphasis">￥{{ moneyFormat(orderLastDay) }}</span>
    </template>
  </CommonCard>
</template>

<script lang="ts">
import CommonCard from './CommonCard.vue'
export default {
  name: 'TodayOrders',
  components: {
    CommonCard,
  },
}
</script>

<script lang="ts" setup>
import { ref, onMounted, computed, watch, reactive } from 'vue'
import * as echarts from 'echarts'
import type { EChartsType } from 'echarts'
import { useReportDataStore } from '@/stores/reportData'
import useFormat from '@/hooks/useFormat'
const reportDataStore = useReportDataStore()
// 将那两个用来格式化数据的函数解构出来
const { numberFormat, moneyFormat } = useFormat()
// 定义一个ref 关联到页面中的ref标签上面
const lineChartRef = ref()
// 这个好像是为了规范这个的类型
let myChart: EChartsType

// 还是使用计算属性简化数据
const orderToday = computed(() => reportDataStore.reportData.orderToday)
const orderLastDay = computed(() => reportDataStore.reportData.orderLastDay)
const orderTrend = computed(() => reportDataStore.reportData.orderTrend)
const orderTrendAxis = computed(() => reportDataStore.reportData.orderTrendAxis)
// console.log('ff', orderTrendAxis)
const getOption = () => {
  return {
    xAxis: {
      boundaryGap: false, // 两侧不留空白
      // data: [
      //   '一月',
      //   '二月',
      //   '三月',
      //   '四月',
      //   '五月',
      //   '六月',
      //   '七月',
      //   '八月',
      //   '九月',
      //   '十月',
      //   '十一月',
      //   '十二月',
      // ], //这个是x轴的数据列表
      data: orderTrendAxis.value,
    },
    yAxis: {
      // 不显示Y轴的数值
      show: false,
    },
    series: [
      {
        name: '实时数据',
        type: 'line',
        // 列表数据
        data: orderTrend.value,
        // data: [44, 126, 55, 88, 133, 99, 33, 113, 63, 98, 77, 123],
        // 设置曲线平滑
        smooth: true,
        // 设置线条下面区域的样式
        areaStyle: {
          color: 'red',
        },
        // 设置折线点的样式
        itemStyle: {
          opacity: 0,
        },
        // 设置折线的样式
        lineStyle: {
          opacity: 0,
        },
      },
    ],
    // 图表在坐标中显示的位置
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    // 显示提示
    tooltip: {
      trigger: 'axis',
      confine: true,
    },
  }
}
// const getOption = {} 如果直接写对象，在组件挂载完毕的时候，就会有这些数据
// 可以使用箭头函数的方式来书写配置项，当函数被调用的时候才执行里面的代码

// 1. 当页面组件挂载完毕的时候 才要使用数据生成对应的图形
onMounted(() => {
  myChart = echarts.init(lineChartRef.value) // lineChartRef.value存着对应的div标签对象
  // myChart.setOption(getOption())

  // 当浏览器宽度发生变化的时候，图表也要发生变化
  window.addEventListener('resize', () => {
    myChart && myChart.resize()
  })
})
// 发现是有数据的，但是一刷新浏览器就没有数据了，究其原因是刷新浏览器的时候，内存中的数据就没了，
// 此时图表不能渲染，因此需要添加一个监视
// 添加一个监视 因为数据的获取是异步的
watch(orderToday, () => {
  myChart.setOption(getOption())
})
</script>

<style></style>
